<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CMS</title>
<link href="__CSS__/common.css" rel="stylesheet"/>
<link href="__CSS__/right.css" rel="stylesheet"/>
<link rel="stylesheet" href="__INC__/form/css/zebra_form.css" type="text/css">
<link rel="stylesheet" href="__CSS__/ui/jquery.ui.all.css">
<script src="__JS__/jquery-1.7.2.min.js"></script>
<script src="__JS__/ui/jquery.ui.core.js"></script>
<script src="__JS__/ui/jquery.ui.widget.js"></script>
<script src="__JS__/ui/jquery.ui.mouse.js"></script>
<script src="__JS__/ui/jquery.ui.sortable.js"></script>
<script src="__JS__/ui/jquery.ui.droppable.js"></script>
<script src="__JS__/ui/jquery.ui.tabs.js"></script>
<script src="__JS__/common.js"></script>
<style>
    .cando .ui-state-default {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 250px;
    }

    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #sortable li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        height: 1.5em;
    }

    .one {
        background: #fcfcfc;
    }

    #sortable .controls {
        float: right;
        margin-right: 20px;
    }

    #sortable .controls a {
        margin-right: 20px;
    }
</style>
<script>
    $(function () {
        $(".cando").sortable().disableSelection();
        var $tabs = $("#tabs").tabs();
        var $tab_items = $("ul:first li", $tabs).droppable({
            accept: ".cando li",
            hoverClass: "ui-state-hover",
            drop: function (event, ui) {
                var $item = $(this);
                var $list = $($item.find("a").attr("href")).find(".cando");
                /* 				ui.draggable.hide( "slow");
                 $( this ).appendTo( $list ); */
                ui.draggable.hide("normal", function () {
                    //$tabs.tabs( "select", $tab_items.index( $item ) );
                    $(this).appendTo($list).show("slow");
                });
            }
        });

        $("#sortable").sortable({
            placeholder: "ui-state-highlight"
        });
        $("#sortable").disableSelection();
    });
</script>
</head>
<body>
<!--右侧区域 begin-->
<div class="right">
    <!--当前位置 begin-->
    <include file='common:crumbs'/>
    <!--当前位置 end-->
    <!--主体区域 begin-->
    <div class="container">
        <div class="alert_div">
            <h4 class="alert_info"><span class="welcome">{$welcome}</span>您现在的位置是：{$current} </h4>
            <h4 class="alert_what" style="display:none;"></h4>
        </div>
        <!--样式三 begin-->
        <div class="stats">
            <div class="lm_title">
                <div class="lm_title_l"><em>{$current}</em></div>
            </div>
            <div class="lm_content">
                <div class="demo" style="padding:10px;">
                    <ul id="sortable">
                        {$flist}
                    </ul>
                </div>
                <table class="Zebra_Form" style="width:100%;text-align: center;">
                    <tr>
                        <td>
                            <input type="button" value="添加字段" onclick="javascript:location.href='__GROUP__/channel/fieldadd?cid={$cid}'" class="button"></input>
                            <input type="button" value="保存顺序" onclick="savenav()" class="button"></input>&nbsp;&nbsp;&nbsp;
                            <input type="button" value="模型列表" onclick="javascript:location.href='__GROUP__/channel/show'" class="button"></input>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="lm_bottom">
                <div class="lm_bottom_l"><em></em></div>
            </div>
        </div>
        <!--样式三 end-->
    </div>
    <!--主体区域 end-->
</div>
<!--右侧区域  end-->
</body>
<script>
    function savenav() {
        topjson = '';
        var cid = '{$cid}';
        var top = $("#sortable li");
        top.each(function (index) {
            var temp = '';
            var id = $(this).attr('_index');
            temp = "{'index':'" + id + "','order':'" + index + "'},";
            topjson += temp;
        })

        topjson = "[" + topjson + "]";
        topjson = eval(topjson);

        $.post("{:U('ajax/channelajax')}", {'action': 'fieldorder', 'cid': cid, 'data': topjson}, function (data) {
            if (data != 1) {
                /* 				 alert("保存失败！");
                 location.href=location.href; */
                jl_notify(2, '呜呜，保存排序失败！');
            } else {
                jl_notify(1, '嘻嘻，保存排序成功！');
                //alert("保存成功！");
            }
        });
    }
</script>
</html>